<template>
<!-- 文章分页 -->
    <div style="overflow: hidden">
      <el-row class="article-list">
          <el-col v-for="(item, index) in articles" :key="index">
              <el-card>
                <el-link @click="view(item.articleId) " target="_blank">
                    <el-row>
                        <h5>
                            <el-link @click="view(item.articleId) " target="_blank">{{item.articleTitle}}</el-link>
                        </h5>
                    </el-row>
                    <el-row class="bar">
                        <div class="col"><span>作者 : </span> <span>小北</span></div>
                        <div class="col"><span>分类 : </span><span :v-text="typeProcess(item.articleType)"></span></div>
                        <div class="col"><span>阅读量 : </span><span>{{item.articleViews}}</span></div>
                        <div class="col"><span>评论数 : </span><span>{{item.articleComment_count}}</span></div>
                        <div class="col" style="float:right;"><span>发表日期 : </span><span>{{item.articleDate}}</span></div>
                    </el-row>
                    <el-row class="desc">
                        <p>{{item.description}}</p>
                    </el-row>
                </el-link>
              </el-card>
          </el-col>
      </el-row>
        <div class="block">
            <!-- <span class="demonstration">页数较少时的效果</span> -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="innerPage.currentPage" :page-size="innerPage.pageSize" background layout="prev, pager, next" :total="totalCount">
            </el-pagination>
        </div>
    </div>

</template>

<script>
// import scrollPage from './ScropllPage'
import {getArticleList} from '../api/article'

export default {
    name: 'ArticlePage',
    components: {
        // scrollPage
    },
    props: {
        // query == this.query.key
        query: {
            type: Object,
            default() { 
                return {}
            }
        }
    },
    watch: {
        'query': {
            handler() {
                this.articles = [],
                this.innerPage.p = 1,
                this.innerPage.size = 5,
                this.getArticles(this.innerPage.currentPage, this.innerPage.pageSize)
            },
        deep: true
        }
    },
    created(){
        this.getArticles(this.innerPage.currentPage, this.innerPage.pageSize)
        
    },
    data() {
        return {
            // loading: false,
            // noData: false,
            innerPage: {
                currentPage: 1,
                pageSize: 5,
            },
            totalCount: 5,
            articles: [],
        }
    },
    methods: {
        load() {
            this.getArticles(this.innerPage.currentPage, this.innerPage.pageSize)
        },
        view(id){
            this.$router.push({path: '/view/'+ id +'.html'})
        },
        getArticles(pp,ps) {
            let that = this
            that.query.p = pp;
            that.query.size = ps;
            getArticleList(that.query).then(res => {
                that.totalCount = res.total
                // that.innerPage.cureentPage = data.data.body.length
                let newArticles = res.data

                // if (newArticles && newArticles.length > 0){
                    // that.innerPage.currentPage += 1
                // that.articles = that.articles.concat(newArticles)
                that.articles = newArticles
                // }
            })
            .catch(error => {
                if(error !== 'error'){
                    that.$message({type: 'error', message: '文章加载失败', showClose: true})
                }
            }).finally(()=> {
                // that.loading = false
            })
        },
        handleSizeChange(val) {
            this.innerPage.pageSize = val
            getArticles(val,5)
            this.innerPage.currentPage = 1
        },
        handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage=val
            // 切换页码时，要获取每页显示的条数
            // this.getArticles(this.innerPage.PageSize,(val)*(this.innerPage.pageSize))
            this.getArticles(val,this.innerPage.pageSize)
        },
        typeProcess(typeData){
            switch(typeData){
                case 11:
                    return "Java"
                case 22:
                    return "Python"
                case 33:
                    return "Linux"
                case 44:
                    return "MySql"
                case 99:
                    return "啥都有"
                default:
                    return "未分类"
            }
        }
    }
}
</script>

<style scoped>
.article-list{
    width: 100%;
    cursor: pointer;
    /* opacity: 0.9; */
}
.article-list .el-col .el-card{
    text-align: left;
}
.el-col{
    margin: 0 0 40px 0;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: 1;
}
.el-card >>> .el-link {
    height: 100%;
}
.el-card a {
    display: block;
    width: 100%;
}
.el-card h5 .el-link {
    width: 65%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.el-card{
    position: relative;
    text-align: left;
    box-sizing: border-box;
    /* width: 80%; */
    margin: 0 20px 0 0;
}
h5{
    display: block;
    font-size: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.el-link{
    height: 34px;
    font-size: 26px;
    font-weight: 400;
    padding: 0 0 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bar{
    width: 100%;
    font-size: 12px;
    color: #999;
    padding: 10px 0;
    /* text-align: right; */
}
.bar .col{
    display: inline-block;
}
.col span{
    margin-right: 5px;
}
.desc{
    /* display: block; */
    width: 100%;
    color: #555;
    font-size: 16px;
    line-height: 2;
    padding: 10px 0;
}
.desc p{
    /* display: block; */
    height: 70px;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
    display: -webkit-box;
}

</style>